<template>
  <div class="tag-box">
    <span
      v-for="item in tag" :key="item.id"
      :class="{'active': currentType == item.id}"
      @click="changeTag(item.id)"
      class="tag-item">
      {{item.name}} ({{item.count}})
    </span>
  </div>
</template>
<script>
export default {
  props: ['tag', 'currentType'],
  methods: {
    changeTag (id) {
      this.$emit('change', id)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/mixin';
.tag-box {
  padding: .3rem .28rem .1rem;
  .tag-item {
    padding: 0 .24rem;
    display: inline-block;
    line-height: .52rem;
    text-align: center;
    font-size: .26rem;
    color: #666;
    @include border-fix(#bbb, .52rem);
    margin: 0 .2rem .2rem 0;
    &.active {
      @include border-fix(#ffb000, .52rem);
      background-color: #fffbf1;
    }
  }
}
</style>
